<template>
    <el-menu :default-openeds="['2', '3']" style="min-height: 100%;  overflow-x: hidden;"
            background-color="rgb(48, 65, 86)"
            text-color="#fff"
            active-text-color="#ffd04b"
            :collapse-transition="false"
            :collapse="isCollapse"
            router
            @select="handleSelect"
    >
        <div style="height: 60px; line-height: 60px; text-align: center;">
            <img src="../assets//logo.png" alt="" :width="imgWidth + 'px'" style="position: relative; top: 5px; margin-right: 5px;">
            <b style="color: white;" v-show="logoTextShow">后台管理系统</b> 
        </div>
        <el-menu-item index="/home">
            <i class="el-icon-menu"></i>
            <span slot="title">首页</span>
        </el-menu-item>
        <el-submenu index="2">
            <template slot="title">
                <i class="el-icon-s-home"></i>
                <span>前台首页管理</span>
            </template>
            <el-menu-item-group>
                <el-menu-item index="/carouselManagement">轮播图管理</el-menu-item>
                <el-menu-item index="/recommendedProduct">推荐商品管理</el-menu-item>
            </el-menu-item-group>
        </el-submenu>
        <el-submenu index="3">
            <template slot="title">
                <i class="el-icon-s-goods"></i>
                <span>商品</span>
            </template>
            <el-menu-item-group>
                <el-menu-item index="/goodsManagement">商品管理</el-menu-item>
                <el-menu-item index="/goodsClassify">商品分类</el-menu-item>
            </el-menu-item-group>
        </el-submenu>
        <el-menu-item index="/orderManagement">
            <i class="el-icon-s-order"></i>
            <span slot="title">订单管理</span>
        </el-menu-item>
        <el-menu-item index="userManagement">
            <i class="el-icon-user-solid"></i>
            <span slot="title">用户管理</span>
        </el-menu-item>
        <el-submenu index="6">
            <template slot="title">
                <i class="el-icon-setting"></i>
                <span>系统管理</span>
            </template>
            <el-menu-item-group>
                <el-menu-item index="changePassword">修改密码</el-menu-item>
                <el-menu-item index="loggingOut">安全退出</el-menu-item>
            </el-menu-item-group>
        </el-submenu>
        <el-menu-item index="/personalCenter">
            <i class="el-icon-s-promotion"></i>
            <span>个人中心</span>
        </el-menu-item>
    </el-menu>
</template>

<script>
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Aside',
    props: {
        isCollapse: Boolean,
        logoTextShow: Boolean,
        imgWidth: Number,
        collapse: Function
    },
    methods: {
        handleSelect(index) {
            console.log(index);
        }
    }

}
</script>

<style>
</style>